<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>支付页面</title>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/qrcode.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <!-- 引入组件库 -->
    <script src="../plugins/elementui/index.js"></script>

    <link rel="stylesheet" href="../css/page-health-index.css" />
    <link rel="stylesheet" href="../css/page-health-login-pay.css" />
    <script src="../plugins/healthmobile.js"></script>
    <script>
        var id = getUrlParam("id");
    </script>
    <style>
        /*.el-header {*/
        /*    background-color: #B3C0D1;*/
        /*    color: #333;*/
        /*    text-align: center;*/
        /*    line-height: 60px;*/
        /*    background-image: url("../plugins/img/e.jpg");*/
        /*}*/

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 256px ;
            background-image: url("../plugins/img/e.jpg");
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">


    <el-container>
        <el-main>
            <!-- 页面内容 -->
            <div class="contentBox" style="width: 100%">
                <button style="color: greenyellow;font-size: 28px;font-weight: revert;background-color: #F56C6C" >订单号：asd4789-{{orderId}}</button>
                <center><div alt="客官快付钱啦~嘤~嘤~嘤~~~" id="qrCode" ></div></center>
                <div  style="color:red"></div>
                <button id="timer" type="danger" style="font-size: 28px;background-color: #F56C6C"></button>
                <el-row>
                    <el-button type="primary" @click="flushPage" >点击刷新二维码</el-button>
                    <el-button type="success" @click="deleteOrder">点击取消订单</el-button>
                </el-row>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            payUrl: '',
            // orderNo: '',
            orderId: '',
            message: '订单支付成功！ '
        },

        methods: {

            deleteOrder() {
                axios.get("/order/deleteOrder/" + id).then((res) => {
                    if (res.data.data) {
                        const h = this.$createElement;
                        this.$msgbox({
                            title: '订单状态',
                            message: h('p', null, [
                                h('span', null, ''),
                                h('i', {style: 'color: teal'}, '取消订单成功')
                            ]),
                        })
                    }
                })
            },
            flushPage() {
                window.location.href = "pay.html?id=" + id
            },
            payOrder() {
                axios.get('/wxPay/createPayOrder/' + id).then(res => {
                    if (res.status === 200) {
                        // alert("111")
                        this.orderId = res.data.data.oId
                        //生成二维码
                        new QRCode(document.getElementById("qrCode"), {
                            text: res.data.data.url,
                            width: 128,
                            height: 128,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        })
                        this.isPay()
                    }
                })
            },
            isPay() {
                // 开启定时任务，查询付款状态
                let num = setInterval(function () {
                    axios.get('/wxPay/isPay/' + id).then(res => {
                        console.log(res.data)
                        if (res.data.flag && res.data.data == 1) {
                            clearInterval(num);
                            alert("支付成功");
                            window.location.href="index.html";
                        }
                    })
                }, 3000);
                // 同时设置一个定时任务，15分钟后，终止查询，认为付款失败
                setTimeout(function () {
                    clearInterval(num);
                    alert("支付失败")
                }, 60000)
            },
        },
        created() {
            this.payOrder();
        }
    });
    timer = setInterval("CountDown()", 1000);
    var oBox = document.getElementById('timer');
    var maxtime = 1 * 60;

    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "距离结束还有：" + minutes + "分" + seconds + "秒";
            oBox.innerHTML = msg;
            if (maxtime == 1 * 60)
                alert("还剩5分钟");
            --maxtime;
        } else {
            clearInterval(timer);
            alert("时间到，结束!");
        }
    }
</script>
</html>